<template>
  <div class="mine">
    <header class="wrap">
      <div class="conNav">
        <img src="/static/img/set.png" class="set" />
        <span>个人中心</span>
        <!--<img src="/static/img/news.png" class="news" />-->
         <img :src="user.imgUrl" class="news" />
      </div>
    </header>
    <div class="main">
      <div class="top">
        <div class="login">
          <div class="out">
            <span class="in"></span>
          </div>
          <span class="log"  @click="login()">点击登录</span>
        </div>
        <div class="save">
          <img src="/static/img/icon_save.png" class="set"/>
          <span>我的收藏</span>
        </div>
      </div>
      <div class="mid">
         <div class="order">
            <span class="my">我的订单</span>
            <span class="all">查看全部订单</span>
         </div>
         <ul class="state">
             <li>
               <img src="/static/img/icon_daifukuan.png"/>
               <span>待付款</span>
             </li>
             <li>
               <img src="/static/img/icon_daifahuo.png"/>
               <span>待发货</span>
             </li>
             <li>
               <img src="/static/img/icon_daishouhuo.png"/>
               <span>待收货</span>
             </li>
             <li>
               <img src="/static/img/icon_daipingjia.png"/>
               <span>待评价</span>
             </li>
             <li>
               <img src="/static/img/icon_daituikuan.png"/>
               <span>退款/售后</span>
             </li>
         </ul>
         <div class="address">
           <span>收货地址管理</span>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: 'Mine',
  methods: {
    login () {
      this.$router.push('/login')
    }

  },
  computed: {
    ...mapGetters(['user'])
  }
}
</script>

<style lang="less" scoped>
.wrap {
  width: 100%;
  height: 4.946667rem;
  background: #ff9900;
  position: relative;
  .conNav {
    width: 100%;
    height: 0.9067rem;
    line-height: 0.9067rem;
    padding-top: 0.826rem;
    text-align: center;
    position: relative;
    .set {
      left: 0.413333rem;
      position: absolute;
      bottom: 0.133333rem;
    }
    span {
      font-size: 0.555867rem;
      color: #ffffff;
    }
    .news {
      right: 0.586667rem;
      position: absolute;
      bottom: 0.133333rem;
    }
  }
}
.main {
  width: 100%;
  height: 11.466667rem;
  background: #efeeee;
  .top {
    height: 3.466667rem;
    background: #ffffff;
    .login {
      width: 2.78rem;
      position: absolute;
      height: 3.56rem;
      margin-left: -1.5rem;
      left: 50%;
      top: 3rem;
      .out {
        width: 2.78rem;
        height: 2.78rem;
        border-radius: 50%;
        display: table;
        background-color: #ffffff;
        .in {
          margin: 0.26rem;
          display: block;
          width: 2.26rem;
          height: 2.26rem;
          border-radius: 50%;
          background-color: #e6dfdf;
        }
      }
      .log {
        display: block;
        margin-top: 0.266667rem /* 20/75 */;
        width: 2.78rem;
        text-align: center;
        font-size: 0.426667rem;
      }
    }
    .save{
      font-size: 0.426667rem;
      padding-top: 2.3rem;
      margin-left: .266667rem;
    }
  }
  .mid{
    height: 4.16rem;
    background-color: #ffffff;
    margin-top: .266667rem;
    .order{
      height: 1.666667rem;
      line-height: 1.666667rem;
      font-size:.444667rem;
      border-bottom: 1px solid #666666;
      .my{
        float: left;
        margin-left: .613333rem;
      }
      .all{
        float: right;
        color: #999999;
        margin-right: 1.6rem;
      }
    }
    .state{
      list-style: none;
      height: 2.506667rem;
      li{
        float: left;
        width: 20%;
        text-align: center;
        padding: .533333rem 0;
      }
      span{
        display: block;
        margin-top: .266667rem;
        color: #666666;
      }
    }
    .address{
      height: 1.706667rem;
      background: #ffffff;
      span{
        font-size: .446667rem;
        color: #999999;
        line-height: 1.706667rem;
        padding-left: .6rem;
      }
    }
  }
}
</style>
